<template>
  <div v-loading="loading" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  name: 'CircleChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '20px'
    },
    expense: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      pointCount: undefined,
      loading: false,
      xData: undefined,
      chartData: [],
      name: undefined
    }
  },
  watch: {
    expense: {
      handler(oldValue, val) {
        if (val) {
          if (val !== oldValue) {
            this.initChart(val)
          }
        }
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(data) {
      this.chart = echarts.init(this.$el, null)
      this.chart.setOption({
        color: [
          'rgba(45, 209, 218, .3)',
          '#2DD1DA'
        ],
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: data[1] === -1 ? 0 : data[0] - data[1], name: '' },
              { value: data[1] === -1 ? data[0] : data[1], name: '' }

            ]
          }
        ]
      })
    }
  }
}
</script>
